<template>
  <view class="invitation">
    <uni-nav-bar title="提现" left-icon="left" @clickLeft="navBack" :fixed="true" statusBar background-color="#1B91FF"
      color="#fff" rightText="提现记录" @clickRight="navTo('invitation/records')"></uni-nav-bar>
    <view class="frame"></view>
    <view class="package" style="margin-top: -500rpx;">
      <view>可提现金额</view>
      <view style="margin-top:20rpx;">￥<text style="font-size: 42rpx;">{{mouch}}</text></view>
      <view style="margin-top:50rpx;">提现金额</view>
      <view class="space-between mon">
        <text>￥</text>
        <input class="uni-input" style="width:75%;font-size:40rpx;" v-model="money" type="digit" />
        <text style="color:#1D8DFF;" @click="()=>money=mouch">全部提现</text>
      </view>
      <view style="margin-top:50rpx;">提现至微信</view>
      <view class="space-between mon">
        <input class="uni-input" placeholder="请输入微信号" v-model="wechat" />
      </view>
      <view style="margin-top:30rpx;color:#666;">填写微信号方便客服与您联系</view>
      <view class="but" @click="submit()">申请提现</view>
    </view>
  </view>
  <!-- 手机号面板弹框 -->
  <uni-popup ref="PhonePadPopup" type="bottom" :is-mask-click="false" style="z-index: 910">
    <PhonePad type="bind" @close="closePhonePad" />
  </uni-popup>
</template>

<script setup lang="ts">
  import { navBack, navTo } from '@/utils/navigator';
  import { errorToast, successToast, showLoading } from '@/utils/prompt';
  import { toPublish } from '@mqtt';
  import PhonePad from '@/components/common/PhonePad.vue';
  import { getBonusData } from '@/gql/invitation';
  import { ref } from 'vue';
  import { getDriverID } from '@/stores/driverID';
  import { useUserStore } from '@/stores/user';
  const userInfo = useUserStore();
  const driver_id = getDriverID();
  /**
   * 提现
   * @property {String} wechat 微信号
   * @property {String} money 提现金额
   * @property {String} mouch 可提现总金额
   * @property {Null} PhonePadPopup 手机号面板弹框
   */
  const wechat = ref('')
  const money = ref('')
  const mouch = ref('')
  const PhonePadPopup = ref(null)
  init()
  function init() {
    const payload = {
      query: getBonusData,
      variables: {
        driver_id,
      },
    };
    toPublish(
      'ql/driver/getBonusData',
      payload,
      (obj : any) => {
        const { data } = obj;
        mouch.value = data.getBonusData.withdrawal
      }
    );
  }
  /**
   * 申请提现
   * @property {Number} driver_id 用户ID
   * @property {String} money 提现金额
   * @property {String} wechat 微信号
   */
  function submit() {
    if (!userInfo.mobile) {
      errorToast('请绑定您的手机号码');
      openPhonePad();
      return;
    }
    if (!money.value) {
      errorToast('请输入提现金额')
      return
    } else if (money.value < 1) {
      errorToast('提现金额不低于1元')
      return
    }
    if (!wechat.value) {
      errorToast('请输入微信号')
      return
    }
    showLoading()
    const payload = {
      driver_id,
      money: money.value,
      wechat: wechat.value
    };
    toPublish(
      'driver/addWithdrawal',
      payload,
      (obj : any) => {
        const { code, msg } = obj;
        if (code === 1) {
          successToast(msg)
          wechat.value = ''
          money.value = ''
          init()
          setTimeout(() => {
            navTo('invitation/records')
          }, 1000)
        } else {
          errorToast(msg)
        }
      }
    );
  }
  /**
   * 打开/关闭绑定手机号码弹框
   */
  function openPhonePad() {
    PhonePadPopup.value.open();
  }
  function closePhonePad() {
    PhonePadPopup.value.close();
  }
</script>

<style scoped lang="less">
  .frame {
    height: 570rpx;
    background: linear-gradient(#1B91FF, #C5DFF7);
    border-radius: 0px 0px 60rpx 60rpx;
  }

  .mon {
    margin-top: 30rpx;
    padding-bottom: 20rpx;
    border-bottom: 1px solid #eee;
    box-sizing: border-box;
  }

  .but {
    width: 496rpx;
    height: 88rpx;
    background: #2C99FF;
    border-radius: 44rpx;
    text-align: center;
    line-height: 88rpx;
    margin: 80rpx auto 40rpx;
    color: #fff;
  }
</style>
<style>
  .invitation>>>.uni-navbar--border {
    border: none;
  }
</style>